<include file="Common/common" />
<body>
	
	<div class="layui-tab-item layui-show">
		<div class="layui-main">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			  <legend>新增部门</legend>
			</fieldset>

			<form class="layui-form" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">部门名称</label>
					<div class="layui-input-block">
						<input type="text" id="department_name" name="department_name" lay-verify="department_name" autocomplete="off" placeholder="请输入要新增加的部门名称" class="layui-input">
					</div>
				</div>


				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit="" lay-filter="sub_new_department">立即提交</button>
					</div>
				</div>
			</form>

			
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			  <legend>部门列表</legend>
			</fieldset>

			<table class="layui-table" id="department-list">
				<colgroup>
					<col width="150">
					<col width="150">
					<col width="200">
				</colgroup>
				<thead>
					<tr>
						<th>ID</th>
						<th>部门名称</th>
						<th>操作</th>
					</tr> 
				</thead>
				<tbody>
					<foreach name="departmentList" item="vo">
					<tr>
						<td>{$vo['id']}</td>
						<td>{$vo['name']}</td>
						<td>
							<button class="layui-btn" onclick="func_delete(this,{$vo['id']})"><i class="layui-icon">&#xe640;</i></button>
						</td>
					</tr>
					</foreach>
					
				</tbody>
			</table>

		</div>
	</div>
</body>
<script type="text/javascript">
	layui.use(['form'], function(){
		var form = layui.form;
		form.on('submit(sub_new_department)', function(data){
			
			if (data.field.department_name == '') {
				layer.msg('部门名称不能为空');
			}else{
				// console.log(data.field);
				layer.confirm('确定要新增部门：'+data.field.department_name+' ？',function(index){
					
		            $.ajax({
			            type: "post",
			            url: "{:U('Department/ctrl_AddNewDepartment')}",
			            data: data.field,
			            dataType: "json",
			            success: function(rtJson){
			               if (rtJson.code == 100) {
						      	var innerTD ="<tr><td>"+rtJson.data.id+"</td>";
			                        innerTD +="<td>"+rtJson.data.name+"</td>";
			                        innerTD +="<td> <button class='layui-btn' onclick='func_delete(this,"+rtJson.data.id+")' ><i class='layui-icon'>&#xe640;</i></button> </td></tr>";

			                    $(innerTD).appendTo('#department-list');
			                    document.getElementById('department_name').value = '';//清除输入框内容
			                    layer.msg(rtJson.msg);
						    }else{
						    	layer.msg(rtJson.msg);
						    }
			            }
			        });
				});
			}
			return false;
		});
	});




	function func_delete(obj,id){
		layer.confirm('确定要删除该部门？',function(index){
			$.ajax({
	            type: "post",
	            url: "{:U('Department/ctrl_DeleteDepartment')}",
	            data: {id:id},
	            dataType: "json",
	            success: function(rtJson){
	               if (rtJson.code == 100) {
				      	
	                    $(obj).parents("tr").remove();
	                    layer.msg(rtJson.msg);
				    }else{
				    	layer.msg(rtJson.msg);
				    }
	            }
	        });
		});
	}



</script>